<template>
    <CenterContent class="product-info" >
      <Breadcrumb :next="next"></Breadcrumb>

      <el-row :gutter="40">
<!--        左侧的展示-->
       <el-col :span="6">
         <ZoomImage :src="product.image"></ZoomImage>
       </el-col>
        <el-col :span="18">
          <!--        标题-->
          <el-row :gutter="10">
           <el-col :span="24">
             <span class="product-title">{{product.title}}</span>
           </el-col>
          </el-row>
<!--简介-->
          <el-row :gutter="10">
            <el-col :span="24" class="product-introduce">
              <span >{{product.introduce}}</span>
            </el-col>
          </el-row>

          <el-row :gutter="10">
           <el-col :span="24" class="">
             <!--          价格累计销售-->
             <div class="product-info-group">
               <el-row :gutter="10">
                <el-col :span="12">
                  <span class="product-money-text">销售价格:</span>
                  <span class="product-money">￥{{product.price}}</span>
                </el-col>
                 <el-col :span="3" push="8">累计销售 {{product.sold_count}}</el-col>
               </el-row>
               <!--          skus-->
               <el-row :gutter="10">
                 <el-col :span="6">
                   <div class="product-sku-group">
                     <div>
                       <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
                       <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
                     </div>
                   </div>
                 </el-col>
               </el-row>
             </div>
           </el-col>
          </el-row>

        </el-col>
<!--        简介-->
      </el-row>
    </CenterContent>
</template>

<script>
import Breadcrumb from '../../../components/Home/Breadcrumb'
import request from '../../../request/home/product'
import ZoomImage from '../../../components/Home/ZoomImage'
export default {
  name: 'Show',
  data () {
    return {
      product: {},
      next: [
        { 1: '电器' }
      ],
      selectProduct: {
        skus_id: null,
        count: 0
      }
    }
  },
  methods: {

  },
  mounted () {
    request.show(this.$route.params.id, this)
  },
  watch: {
    '$route' (to) {
      request.show(to.params.id, this)
    }
  },
  components: {
    ZoomImage,
    Breadcrumb
  }
}
</script>

<style scoped lang="scss">
  .product-list {
    margin-top:20px ;
  }
  .product-title{
    font-size: 25px;
  }
  .product-introduce{
    margin-top: 14px;
    color: #999;
    font-size: 13px;
  }
  .product-info-group{
      margin-top: 20px;
      height: 180px;
      padding: 10px;
      background: url("http://pc.qingwuit.com/pc/summary-bg.jpg");
      .product-money-text{
        font-size: 30px;
      }
      .product-money{
        font-size: 30px;
        color: #e01d20;
      }
    .product-sku-group{
      margin-top: 20px;
    }
  }
</style>
